<template>
	<!-- <view class="flex avatar-list-container">
		<view class="avatar" v-for='(item,index) in list' :key="item.id+String(index)" @click="toView(item)" :style="{transform: `translateX(${-left}px)`}">
			<u-avatar class="avatar-img" size='108rpx' :src="$ossUrl+item.avatar"></u-avatar>
			<w-image class="avatar-tag" :src='item.headimg' width="76" height="78"></w-image>
		</view>
	</view> -->
	<view class="avatar-list-container" style="padding: 0 29px;">
		<u-status-bar></u-status-bar>
		<view class="flex flex-ai-center flex-js-sa mb-16">
			<view class="number-2 flex flex-dir-col flex-ai-center">
				<block v-if="items.length >= 2">
					<view  class="avatar1">
						<image style="width: 100%;height: 100%;" :src="$ossUrl + items[1].avatar" ></image>
					</view>
					<view class="flex flex-ai-center">
						<text class="font-color-white font-size-10 ">{{ items[1].nickname }}</text>
						<!-- <w-image :src="items[1].listimg" width="75" height="26"></w-image> -->
					</view>
					<view class="flex flex-ai-center hot">
						<w-icon name="value" v-show="search.type==1"></w-icon>
						<w-icon name="hot" v-show="search.type==2"></w-icon>
						<view class="number ml-2">{{ items[1].price }}</view>
					</view>
				</block>
				
			</view>
			<view class="number-1 flex flex-dir-col flex-ai-center">
				<block v-if="items.length >= 1">
					<view  class="avatar1">
						<image style="width: 100%;height: 100%;" :src="$ossUrl + items[0].avatar" ></image>
					</view>
					<view class="flex flex-ai-center">
						<text class="font-color-white font-size-10">{{ items[0].nickname }}</text>
						<!-- <w-image :src="items[0].listimg" width="75" height="26"></w-image> -->
					</view>
					<view class="flex flex-ai-center hot">
						<w-icon name="value" v-show="search.type==1"></w-icon>
						<w-icon name="hot" v-show="search.type==2"></w-icon>
						<view class="number ml-2">{{ items[0].price }}</view>
					</view>
				</block>
			</view>	
			<view  class="number-3 flex flex-dir-col flex-ai-center">
				<block v-if="items.length >= 3">
					<view  class="avatar1">
						<image style="width: 100%;height: 100%;" :src="$ossUrl + items[2].avatar" ></image>
					</view>
					<view class="flex flex-ai-center">
						<text class="font-color-white font-size-10">{{ items[2].nickname }}</text>
						<!-- <w-image :src="items[2].listimg" width="75" height="26"></w-image> -->
					</view>
					<view class="flex flex-ai-center hot">
						<w-icon name="value" v-show="search.type==1"></w-icon>
						<w-icon name="hot" v-show="search.type==2"></w-icon>
						<view class="number ml-2">{{ items[2].price }}</view>
					</view>
				</block>
			</view>
		</view>
		<w-image src="/static/bg/mrt-mc.png" style="width: 100%;" height="98"></w-image>
	</view>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
				default () {
					return []
				}
			},
			search:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				avatarWidth: 0,
				timer: null,
				left:0,
				list:[]
			}
		},
		watch: {
			'items.length': {
				deep:true,
				immediate:true,
				handler(v) {
					// this.init()
				}
			}
		},
		computed:{
			listTotal(){
				return this.list.length*this.avatarWidth
			}
		},
		methods: {
			toView(item){
				uni.navigateTo({
					url:'/pages/rank/userBuy?id='+item.id
				})
			},
			init() {
				this.list=this.$tools.copyObj(this.items);
				if (this.list.length > 4) {
					let afterList=this.items.slice(0,5);
					this.list.push(...afterList)
					this.$nextTick(()=>{
						this.getAvatarWidth()
					})
				}
			},
			clear() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			getAvatarWidth() {
				if (!this.list.length) return
				uni.createSelectorQuery().in(this).select('.avatar').boundingClientRect(result => {
					this.avatarWidth = result.width
					if (this.list.length > 4 && !this.timer) {
						this.startMove();
					}
				}).exec();
			},
			
			startMove() {
				this.clear()
				this.timer = setInterval(() => {
					this.left++
					if(this.left>=this.listTotal-this.avatarWidth*5){
						this.left=0
					}
				}, 10)
			},

			
		},

	}
</script>

<style lang="scss">
	.avatar-list {
		&-container {
			// padding-bottom: 40rpx;
			width: 750rpx;
			bottom: 0;
			// height: 300px;
			// position: absolute;
			left: 0;
			// overflow-x: hidden;
			margin-top: 120rpx;
			.number-2 {
				position: relative;
				// width: 85.47px;
				// height: 77px;
				// background-image: url($IMG_URL + '/static/bg/number2.png');
				// background-size: 100% 100%;
				transform: translateY(80rpx);
				gap: 15rpx;
				.number-box {
					width: 86.24px;
					height: 77px;
					z-index: 1;
				}
				.avatar1 {
					border: 1px solid #FFFFFF;
					width: 82px;
					height: 82px;
					border-radius: 50%;
				}
				.hot {
					background: #532C30;
					border-radius: 30px 30px 30px 30px;
					border: 1px solid #5E3D43;
					padding: 3px 12px;
					.number {
						font-family: DIN Alternate, DIN Alternate;
						font-weight: bold;
						font-size: 12px;
						color: #FFD5A8;
					}
					
				}
			}
			.number-1 {
				position: relative;
				gap: 15rpx;
				.number-box {
					width: 104.41px;
					height: 100px;
					z-index: 1;
				}
				.avatar1 {
					border: 1px solid #FFFFFF;
					width: 82px;
					height: 82px;
					border-radius: 50%;
				}
				.hot {
					background: #532C30;
					border-radius: 30px 30px 30px 30px;
					border: 1px solid #5E3D43;
					padding: 3px 12px;
					.number {
						font-family: DIN Alternate, DIN Alternate;
						font-weight: bold;
						font-size: 12px;
						color: #FFD5A8;
					}
					
				}
			}
			.number-3 {
				position: relative;
				transform: translateY(80rpx);
				gap: 15rpx;
				.number-box {
					width: 86.24px;
					height: 77px;
					z-index: 1;
				}
				.avatar1 {
					border: 1px solid #FFFFFF;
					width: 82px;
					height: 82px;
					border-radius: 50%;
				}
				.hot {
					background: #532C30;
					border-radius: 30px 30px 30px 30px;
					border: 1px solid #5E3D43;
					padding: 3px 12px;
					.number {
						font-family: DIN Alternate, DIN Alternate;
						font-weight: bold;
						font-size: 12px;
						color: #FFD5A8;
					}
					
				}
			}
			.avatar {
				min-width: 164rpx;
				min-height: 156rpx;
				width: 164rpx;
				height: 156rpx;
				position: relative;
				padding: 0 6rpx;

				.avatar-img {
					position: absolute;
					left: 28rpx;
					right: 27rpx;
					top: 30rpx;
				}

				.avatar-tag {
					left: 6rpx;
					top: 0;
					// width: 152rpx;
					// height: 156rpx;
					position: absolute;
				}
			}
		}
	}
</style>